
<template>
  <div v-loading="loading" class="main-container">
    <div class="head">
      <flexbox class="head__body">
        <!-- 部门模块 -->
        <xh-structure-cell-mul
          radio
          class="xh-structure-cell"
          @valueChange="structureChange"
          type="1"
          v-if="showDept"
          v-loading="deptLoading"
          ref="structurecell"
        />
        <!-- 部门模块结束 -->

        <el-input
          style="width: 140px"
          v-model="periodsVal"
          class="el-input"
          placeholder="请输入训练营期数"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
        <el-select
          clearable
          v-model="categoriesVal"
          placeholder="请选择大类："
          style="margin-left: 15px; width: 140px"
        >
          <el-option
            v-for="item in categoriesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          v-model="salesTypeVal"
          placeholder="请选择销售类型："
          style="margin-left: 15px; width: 140px"
        >
          <el-option
            v-for="item in salesTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          v-model="repetition"
          placeholder="是否重复："
          style="margin-left: 15px; width: 140px"
        >
          <el-option
            v-for="item in repetitionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="hqdateVal"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin: 0 15px"
          value-format="yyyy-MM-dd"
          @change="time_value"
        >
        </el-date-picker>

        <el-button
          type="primary"
          style="width: 100px; height: 35px"
          @click="searchClick"
          >查询</el-button
        >
      </flexbox>
    </div>
    <div class="content">
      <div
        class="axis-content"
        :class="rateDataList.length == 0 ? 'height100' : ''"
      >
        <div v-if="rateDataList.length == 0">暂无数据</div>
        <div id="axismain" />
      </div>
      <div class="table-content">
        <div class="handle-bar">
          <el-button class="export-btn" @click="exportClick">导出</el-button>
        </div>
        <el-table
          v-if="showTable"
          :data="list"
          height="400"
          stripe
          border
          highlight-current-row
          @sort-change="({ prop, order }) => mixinSortFn(list, prop, order)"
        >
          >
          <!-- <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :prop="item.field"
            :label="item.name"
            min-width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip
            sortable="custom"
            type="index"
          /> -->
          <el-table-column
            prop="sort"
            type="index"
            label="排名"
            sortable
            width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="渠道"
            sortable
            min-width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="formCount"
            label="获取表单量"
            sortable
            min-width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="transferCount"
            label="转化为学员表单"
            sortable
            min-width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="actualTotal"
            label="实际回款金额"
            sortable
            min-width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="dealCount"
            label="成交学员表单"
            sortable
            min-width="130"
            align="center"
            header-align="center"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import BaseMixin from "../mixins/Base";
import SortMixin from "../mixins/Sort";
import SummaryMixin from "../mixins/Summary";
import echarts from "echarts";
import {
  queryDataFromTransferByDate,
  dataFromExportByDate,
} from "@/api/bi/customer";
import XrRadioMenu from "@/components/Menu/XrRadioMenu";
import XhStructureCellMul from "@/components/CreateCom/XhStructureCellMul";
export default {
  /** 渠道来源分析 */
  mixins: [BaseMixin, SortMixin, SummaryMixin],
  components: {
    XrRadioMenu,
    XhStructureCellMul,
  },
  data() {
    return {
      loading: false,

      axisOption: null,

      postParams: {
        type: "",
      }, // 筛选参数
      //部门
      showDept: true,
      deptLoading: false,
      repetition: "", //是否重复
      periodsVal: "", //训练营期数
      categoriesVal: "", //大类
      salesTypeVal: "", //销售类型
      hqdateVal: "", //日期
      repetitionOptions: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      salesTypeOptions: [
        {
          value: "1",
          label: "电销",
        },
        {
          value: "2",
          label: "网销",
        },
      ], //销售类型

      categoriesOptions: [
        {
          value: "1",
          label: "电商美工",
        },
        {
          value: "2",
          label: "手绘插画",
        },
        {
          value: "3",
          label: "影视后期",
        },
      ], //大类
      deptId: "",
      deptIdArray: [], //选中部门

      rateDataList: [], //图表数据
      list: [], //列表数据
      axisList: [],
      fieldList: [
        { field: "sort", name: "排名", sortable: true },
        { field: "name", name: "渠道", sortable: true },
        { field: "formCount", name: "获取表单量", sortable: true },
        { field: "transferCount", name: "转化为学员表单", sortable: true },
        { field: "actualTotal", name: "实际回款金额", sortable: true },
        { field: "dealCount", name: "成交学员表单", sortable: true },
      ],
    };
  },
  computed: {},
  watch: {
    data: "time_value", // 监听日期
  },
  mounted() {
    this.setDate();
    this.getRecordList();
    this.initAxis();

    if (this.hqdateVal != null) {
      this.postParams.startTime = this.hqdateVal[0] + " 00:00:00"; //开始时间
      this.postParams.endTime = this.hqdateVal[1] + " 23:59:59"; //结束时间
      this.postParams.type = "";
    } else {
      this.postParams.startTime = ""; //开始时间
      this.postParams.endTime = ""; //结束时间
    }
  },
  created() {},
  methods: {
    //获取当前月份第一天和最后一天
    setDate() {
      let curDate = new Date();
      let y = curDate.getFullYear();
      let m = curDate.getMonth() + 1; //本身就得+1才等于当前月份，然而我要计算下一个月，所以直接+2
      if (m > 12) {
        m = 1;
        y++;
      }
      let monthLastDay = new Date(y, m, 0).getDate();
      var MonthFirst = y + "-" + (m < 10 ? "0" + m : m) + "-" + "01";
      var MonthLast =
        y +
        "-" +
        (m < 10 ? "0" + m : m) +
        "-" +
        (monthLastDay < 10 ? "0" + monthLastDay : monthLastDay);

      this.hqdateVal = [MonthFirst, MonthLast];
    },
    time_value(value) {
      //   console.log(value);
      if (value === null) {
        this.postParams.startTime = ""; //开始时间
        this.postParams.endTime = ""; //结束时间
        // this.postParams.type = "all";
        this.getRecordList();
      }
    },
    // 选择部门
    structureChange(e) {
      if (e.value.length > 0) {
        this.postParams.deptIdArray = e.value;
        this.postParams.dataType = 7;
        this.deptIdArray = e.value;
      } else {
        this.deptIdArray = [];
        this.postParams.deptIdArray = [];
        this.postParams.dataType = 5;
      }
      this.getRecordList();
    },
    searchClick() {
      //   console.log(this.hqdateVal);
      if (this.deptIdArray.length > 0) {
        //当部门不为空时，获取部门数据，并清空公司员工数据
        this.postParams.dataType = 7;
      } else {
        this.postParams.dataType = "";
      }
      if (this.hqdateVal != null && this.hqdateVal != "") {
        this.postParams.startTime = this.hqdateVal[0] + " 00:00:00"; //开始时间
        this.postParams.endTime = this.hqdateVal[1] + " 23:59:59"; //结束时间
        this.postParams.type = "";
      } else {
        this.postParams.startTime = ""; //开始时间
        this.postParams.endTime = ""; //结束时间
        this.postParams.type = "";
      }
      this.postParams.categories = this.categoriesVal; //大类
      this.postParams.periods = this.periodsVal; //训练营期数
      this.postParams.salesType = this.salesTypeVal; //销售类型
      this.postParams.repetition = this.repetition; // 是否重复
      this.postParams.deptIdArray = this.deptIdArray || [];

      this.getRecordList();
    },

    /**
     * 获取相关列表
     */
    getRecordList() {
      this.list = [];
      this.loading = true;
      queryDataFromTransferByDate(this.postParams)
        .then((res) => {
          this.loading = false;
          const data = res.data.transferData || {};
          this.list = data.tableData || [];

          const rateData = data.rateData || [];
          // debugger
          const rateList = [];
          for (let index = 0; index < rateData.length; index++) {
            const element = rateData[index];
            //  console.log(element.name != '二次量字段')
            if (element.name != "二次量字段" && element.name != "自主开拓") {
              rateList.push({
                name: element.name,
                value: element.value,
              });
            }
          }
          this.rateDataList = rateList;
          this.axisOption.series[0].data = rateList || [];
          this.chartObj.setOption(this.axisOption, true);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 饼状图 */
    initAxis() {
      this.chartObj = echarts.init(document.getElementById("axismain"));
      this.axisOption = {
        // title: {
        //   text: "Referer of a Website",
        //   subtext: "Fake Data",
        //   left: "center",
        // },
        tooltip: {
          trigger: "item",
          // formatter: "({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            // 此系列自己的调色盘。
            color: [
              "#dd6b66",
              "#759aa0",
              "#e69d87",
              "#8dc1a9",
              "#ea7e53",
              "#eedd78",
              "#73a373",
              "#73b9bc",
              "#7289ab",
              "#91ca8c",
              "#67E0E3",
              "#9FE6B8",
              "#FFDB5C",
              "#ff9f7f",
              "#fb7293",
              "#E062AE",
              "#E690D1",
              "#e7bcf3",
              "#9d96f5",
              "#8378EA",
              "#96BFFF",
              "#c23531",
              "#ca8622",
              "#bda29a",
              "#6e7074",
              "#546570",
              "#c4ccd3",
            ],

            type: "pie",
            radius: "50%",
            data: [],
            // label: {
            //   alignTo: "edge",
            //   minMargin: 20,
            //   edgeDistance: 10,
            //   lineHeight: 15,
            // },
            emphasis: {
              itemStyle: {
                borderColor: "#fff",
                borderWidth: 1,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    /**
     * 导出点击
     */
    exportClick() {
      this.requestExportInfo(dataFromExportByDate, this.postParams);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../styles/detail.scss";
.axis-content {
  padding-bottom: 0;
  padding: 0 10%;
  height: 480px;
  text-align: center;
  align-items: center;
  font-size: 14px;
  color: #999;
  margin-top: 40px;
}
.axis-content #axismain {
  height: 480px;
}
.height100 {
  height: 100px;
}

.head {
  display: flex;
  align-items: center;
  padding: 15px 70px;
  background: #fff;
  z-index: 1;
  // padding-left: 60px;
  &__body {
    position: relative;
    .user-box {
      width: unset;
      height: 36px;
      padding: 4px 7px;
      border: 1px solid #e1e1e1;
      border-radius: $xr-border-radius-base;
      background-color: white;
      margin-right: 20px;
      display: flex;
      cursor: pointer;
      .user-icon {
        background: $xr-color-primary;
        color: white;
        padding: 5px 6px;
        border-radius: 50%;
      }
      .username {
        font-size: 12px;
        margin: 0 8px;
      }
    }
    .el-radio-group {
      /deep/ .el-radio-button__inner {
        font-size: 12px;
        padding: 11px 12px;
      }
    }
    /deep/ .type-select {
      height: 36px;
    }

    .sort-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .head__body {
    width: 80%;
  }
  .block {
    margin: 0 25px;
  }
}
</style>

